<template>
	<view class="integralShop">
		<view class="nav_tab_bar"><NavTabBar :tabLists="tabLists" @handleChange="changeTab"></NavTabBar></view>
		<view class="integral_goods_lists">
			<view class="integral_goods_item" @tap="goDetails(item)" v-for="item in goodsList.lists" :key="item.id">
				<view class="integral_goods_img"><image :src="item.image" mode=""></image></view>
				<view class="integral_goods_content more-text2">
					<view class="integral_goods_name more-text2 fn-sz-28 fn-cl-222222">{{ item.name }}</view>
					<view class="fn-cl-F34035">
						<span class="fn-sz-30 mar-right-10">{{ item.score }}</span>
						<span class="fn-sz-22">积分</span>
					</view>
				</view>
			</view>
		</view>
		<view class="fix_btn_box"><button class="yellow_btn" @tap="goLink('/pages/integralShop/integralRecord')">兑换记录</button></view>
	</view>
</template>

<script>
import com from '../../mixin/index.js';
import NavTabBar from '../../components/navTabBar/navTabBar.vue';
export default {
	mixins: [com],
	components: {
		NavTabBar
	},
	data() {
		return {
			tabLists: [],
			categoryLists: [],
			page: {
				page: 1,
				page_size: 6
			},
			goodsList: {
				lists: [],
				total: 1,
				total_page: 0
			},
			curTab: 0
		};
	},
	onLoad() {
		this.getCategory();
	},
	onReachBottom() {
		this.getProList();
	},
	methods: {
		getCategory() {
			this.$api.getCategory().then(res => {
				this.tabLists = res.data.lists;
				this.categoryLists = res.data.lists;
				this.getProList();
			});
		},
		getProList() {
			this.getList('goodsList', 'getProList', 'page', { ...this.page, score_category_id: this.categoryLists[this.curTab].id }, true);
		},
		changeTab(val) {
			console.log(val, '切换');
			this.curTab = val;
		},
		goDetails(item) {
			uni.navigateTo({
				url: `/pages/integralShop/intergralDetails?pro_id=${item.id}`
			});
		}
	},
	watch: {
		curTab: {
			handler: function() {
				this.page.page = 1;
				this.goodsList = {
					lists: [],
					total: 1,
					total_page: 0
				};
				this.getProList();
			}
		}
	}
};
</script>

<style lang="scss">
.integralShop {
	background: #f9f9f9;
	padding: 24rpx;
	min-height: 100vh;
	.nav_tab_bar {
	}
	.pageTitle {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.integral_goods_lists {
		display: flex;
		justify-content: space-between;
		.integral_goods_item {
			flex: none;
			margin-bottom: 20rpx;
			width: 340rpx;
			.integral_goods_content {
				background-color: #fff;
				border-radius: 0 0 10rpx 10rpx;
				padding: 0 12rpx 33rpx;
			}
			.integral_goods_img {
				width: 340rpx;
				height: 340rpx;
				image {
					width: 340rpx;
					height: 340rpx;
					border-radius: 10rpx 10rpx 0 0;
				}
			}
			.integral_goods_name {
				margin-bottom: 20rpx;
			}
		}
	}
	.fix_btn_box {
		position: fixed;
		bottom: 20rpx;
		width: 94%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		padding: 5rpx;
		button {
			flex: 1;
			&:nth-child(1) {
				margin-right: 10rpx;
			}
		}
	}
}
</style>
